<template>
  <view class="w-full h-full pl-30 pr-30 page">
    <view class="bg-white radius-10 p-20 pb-100">
      <view class="mt-200 mb-200 flex-row items-center justify-center">
        <image class="w-130 h-130" :src="systemInfo.icon" mode="" />
        <view class="items-center ml-30">
          <text class="text-38 mb-15">{{ systemInfo.name }}</text>
          <text class="text-29">{{ systemInfo.description }}</text>
        </view>
      </view>
      <view class="pl-50 pr-50">
        <input v-model="formData.phone" type="text" placeholder="请输入手机号码" class="page-bg radius-70 h-70 pl-20 pr-20 mb-20 text-28" />
        <input v-model="formData.code" type="text" placeholder="请输入验证码" class="page-bg radius-70 h-70 pl-20 pr-20 text-28" />
        <view class="forgot-pass justify-center mb-40 mt-40" :class="{ 'text-info': !codeStatus }" @click="getCode">
          {{ codeText }}
        </view>
        <view
          class="w-full bg-primary text-white align-center radius-90 h-70 line-h-70 cursor-pointer"
          :class="{ 'bg-primary-1': !formData.phone || !formData.code }"
          @click="login">
          登录
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCodeApi, loginCodeApi } from '@/api'
import { logo } from '@/config'

const reg = /^1[3456789]\d{9}$/
export default {
  data() {
    return {
      systemInfo: {
        name: '智慧康养',
        version: '1.0.0',
        description: '颐乐安康，梦享生活',
        icon: logo,
      },
      formData: {
        phone: '',
        code: '',
      },
      codeStatus: true,
      count: 60,
      timer: null,
      loading: false,
    }
  },
  computed: {
    codeText() {
      if (this.codeStatus) {
        return '获取验证码'
      }
      return this.count + '秒后重新获取'
    },
  },
  methods: {
    getCode() {
      if (!this.formData.phone) {
        return uni.showToast({
          icon: 'none',
          title: '请输入手机号',
        })
      }
      if (!reg.test(this.formData.phone)) {
        return uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号码',
        })
      }
      if (this.codeStatus) {
        getCodeApi({ phone: this.formData.phone }).then((res) => {
          this.codeStatus = false
          this.timer = setInterval(() => {
            this.count--
            if (this.count == 0) {
              clearInterval(this.timer)
              this.count = 60
              this.codeStatus = true
            }
          }, 1000)
          // this.formData.code = res.data;
          uni.showToast({
            title: '验证码已发送，请注意查收',
            icon: 'none',
          })
        })
      }
    },
    login() {
      if (this.formData.phone == '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        })
        return false
      }
      if (!reg.test(this.formData.phone)) {
        return uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号码',
        })
      }
      if (this.formData.code == '') {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
        })
        return false
      }
      loginCodeApi(this.formData).then((res) => {
        uni.setStorageSync('token', res.data.token)
        uni.setStorageSync('phone', this.formData.phone)
        uni.switchTab({ url: '/pages/home/index' })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login-ipt {
  border-bottom: 1rpx solid #939393;
}
.forgot-pass {
  flex-direction: row;
  color: #0090ff;
  justify-content: flex-end;
  align-items: center;
}
</style>
